<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #scroll-container {
        overflow-y: scroll;
        height: 100vh;
        width: 60vw;
        background-color: aliceblue;
        position: fixed;
        top: 0;
        right: 0;
      }
      #body-content {
        /* height: 1000vh; */
        background-color: antiquewhite;
      }
      #toggle {
        position: fixed;
        top: 1em;
        left: 1em;
      }
    </style>
    <script>
      const $ = document.querySelector.bind(document);
      window.addEventListener("load", () => {
        for (const parent of [$("#scroll-content"), $("#body-content")]) {
          for (let i = 0; i < 1000; i++) {
            const p = document.createElement("p");
            p.innerText = "paragraph" + i;
            parent.appendChild(p);
          }
        }
        $('#toggle').addEventListener('click', () => {
          const current = $('body').style.overflowY
          $('body').style.overflowY = current ? '' : 'hidden' 
        })
        $('#scroll-container').addEventListener('scroll', () => {
          for (let i = 0;i<200000000;i++);
        })
      });
    </script>
  </head>
  <body>
    <div id="body-content"></div>
    <button id="toggle">Toggle Overflow</button>
    <div id="scroll-container">
      <div id="scroll-content"></div>
    </div>
  </body>
</html>
